<script setup>
import { ref } from "vue";
import {getDistri, addDistriAndHospital, createDistri} from "@/api/distributor";
import { getHospitalList } from "@/api/hospital";
//绑定表单
const FormRef = ref(null);
//添加分销商弹窗
const addOpen = ref(false);
//修改分销商弹窗
const editOpen = ref(false);
//绑定医院弹窗
const bindclientOpen = ref(false);
//分页数据的总数
const total = ref(50);
//分销商的列表
const distributorsList = ref([]);
//获取医院列表
const hospitalList = ref([]);
//绑定客户
const bindclientOpenFn = async (row) => {
  bindclientOpen.value = true;
  console.log(row);
};
const change = async () => {
  // const res = await addDistriAndHospital({
  //   name: hospitalList.value.nickname,
  //   email: hospitalList.value.email,
  //   phone: hospitalList.value.phone,
  //   address: hospitalList.value.address,
  //   city: hospitalList.value.city,
  //   state: hospitalList.value.state,
  //   country: hospitalList.value.country,
  // });
  // console.log(res);
};
//获取分销商列表
const getDistributorsList = async () => {
  const {
    data:  data ,
  } = await getDistri();
  console.log(data)
  distributorsList.value = data;
  console.log(distributorsList.value);
};
getDistributorsList();
//获取医院列表的id和nickname
const getHospitalListFn = async () => {
  const {
    data: { data },
  } = await getHospitalList();
  hospitalList.value = data;
  // console.log(hospitalList.value);
};
getHospitalListFn();
//添加和修改表单的信息
const FormModel = ref({
  username: '',
  password: 'admin123',
  name: 'admin99',
  phone: '12345678900',
  address: '1234567890',
  email: 'admin99@fgweilin.site',
  city: '1234567890',
  state: '1234567890',
  country: '1234567890',
  sex: 'male'
});
//添加表单的验证规则
const rules = ref({
  username: [
    { required: true, message: "请输入用户名", trigger: "blur" },
    { min: 3, max: 12, message: "长度在 3 到 12 个字符", trigger: "blur" },
  ],
  nickname: [
    { required: true, message: "请输入昵称", trigger: "blur" },
    { min: 3, max: 12, message: "长度在 3 到 12 个字符", trigger: "blur" },
  ],
  phone: [
    { required: true, message: "请输入手机号", trigger: "blur" },
    { min: 1, max: 11, message: "请输入正确的手机号", trigger: "blur" },
    // {
    //   validator: (rule, value, cb) => {
    //     //验证手机号的正则表达式
    //     const phone = /^1[3-9]\d{9}$/;
    //     if (phone.test(value)) {
    //       //合法的手机号
    //       return cb();
    //     }
    //     //手机号不合法
    //     cb(new Error("请输入正确的手机号！"));
    //   },
    //   trigger: "blur",
    // },
  ],
  email: [
    { required: true, message: "请输入邮箱", trigger: "blur" },
    // { min: 3, max: 20, message: "长度在 3 到 20 个字符", trigger: "blur" },
    {
      validator: (rule, value, cb) => {
        //验证邮箱的正则表达式
        const regEmail = /^([a-zA-Z0-9_-])+@([a-zA-Z0-9_-])+(\.[a-zA-Z0-9_-])+/;
        if (regEmail.test(value)) {
          //合法的邮箱
          return cb();
        }
        //邮箱不合法
        cb(new Error("请输入正确的邮箱！"));
      },
      trigger: "blur",
    },
  ],
  state: [
    { required: true, message: "请输入省的信息", trigger: "blur" },
    { min: 3, max: 15, message: "长度在 3 到 15 个字符", trigger: "blur" },
  ],
  city: [
    { required: true, message: "请输入城市", trigger: "blur" },
    { min: 3, max: 15, message: "长度在 3 到 15 个字符", trigger: "blur" },
  ],
  address: [
    { required: true, message: "请输入地址", trigger: "blur" },
    { min: 3, max: 15, message: "长度在 3 到 15 个字符", trigger: "blur" },
  ],
});

//点击修改按钮
const editOpenFn = (row) => {
  editOpen.value = true;
  const { username, nickname, phone, email, address, state, city } =
    row.distributor;
  FormModel.value = {
    username,
    nickname,
    phone,
    email,
    address,
    state,
    city,
  };
};
//点击新建按钮的取消
const addClear = () => {
  addOpen.value = false;
  FormRef.value.clearValidate();
  FormRef.value.resetFields();
};
// //点击新建按钮的取消
// const addClear = () => {
//   addOpen.value = false;
//   FormRef.value.clearValidate();
//   FormRef.value.resetFields();
// };
//点击新建按钮的取消
const editorClear = () => {
  editOpen.value = false;
  FormRef.value.clearValidate();
  FormRef.value.resetFields();
};
//点击新建按钮的确定
const confrimAddBtn = async () => {
  FormRef.value.validate(async (valid) => {
    if (valid) {
      ElMessage.success("验证成功");
      createDistri(FormModel.value)
        .then(
          (res) => {
            console.log(res);
            ElMessage.success("经销商创建成功",res);
          }
        )
        .catch(
          (err) => {
            console.log(err);
            ElMessage.success("经销商创建失败",err);
          }
        )

    } else {
      ElMessage.error("请填写信息");
      return false;
    }
  });
};
//点击修改按钮的确定
const confrimEditBtn = () => {
  FormRef.value.validate(async (valid) => {
    if (valid) {
      ElMessage.success("验证成功");
    } else {
      ElMessage.error("请填写信息");
      return false;
    }
  });
};
</script>

<template>
  <div class="app-container">
    <div class="distributor">
      <el-form
        size="default"
        :inline="true"
        label-width="100px"
        style="margin-top: 10px; margin-left: 40px"
      >
        <el-form-item label="分销商名称">
          <el-input placeholder="请输入分销商名称" clearable />
        </el-form-item>
        <el-form-item>
          <el-button type="primary" size="default">搜索</el-button>
          <el-button size="default">重置</el-button>
        </el-form-item>
      </el-form>

      <el-row :gutter="10" style="margin: 0 10px 10px 10px">
        <el-col :span="1.5">
          <el-button type="primary" plain size="default" @click="addOpen = true"
          >新增分销商</el-button
          >
        </el-col>
      </el-row>
    </div>
    <!-- 主体表单 -->
    <el-table :data="distributorsList">
      <el-table-column
        width="200px"
        label="用户名"
        align="center"
        prop="custom_user.username"
      />
      <el-table-column
        width="200px"
        label="名称"
        align="center"
        prop="custom_user.nickname"
      />
      <el-table-column label="电话号" align="center" prop="custom_user.phone" />
      <el-table-column label="邮箱" align="center" prop="custom_user.email" />
      <el-table-column label="省/市/区" align="center">
        <template #default="scope">
          {{ scope.row.custom_user.state }}/ {{ scope.row.custom_user.city }}/
          {{ scope.row.custom_user.address }}
        </template>
      </el-table-column>

      <el-table-column
        label="操作"
        align="center"
        class-name="default-padding fixed-width"
      >
        <template v-slot="{ row }">
          <el-button link type="primary" @click="bindclientOpenFn(row)"
          >绑定</el-button
          >
          <el-button link type="primary" @click="editOpenFn(row)"
          >修改</el-button
          >
          <el-button link type="danger">删除</el-button>
        </template>
      </el-table-column>
    </el-table>
    <!-- 分页组件 -->
    <el-row type="flex" style="height: 10px" align="middle" justify="end">
      <el-pagination
        v-show="total > 0"
        background
        layout=" total,prev, pager, next"
        :total="total"
        class="pagination"
      />
    </el-row>
    <!-- 新建对话框 -->
    <el-dialog
      :title="'新增分销商'"
      v-model="addOpen"
      width="500px"
      append-to-body
      @close="addClear"
    >
      <el-form
        label-width="100px"
        style="margin-left: 30px"
        ref="FormRef"
        :model="FormModel"
        :rules="rules"
      >
        <el-form-item label="用户名" prop="username">
          <el-input v-model="FormModel.username" style="width: 240px" />
        </el-form-item>

        <el-form-item label="密码" prop="password">
          <el-input v-model="FormModel.password" style="width: 240px" />
        </el-form-item>

        <el-form-item label="名称" prop="name">
          <el-input v-model="FormModel.name" style="width: 240px" />
        </el-form-item>

        <el-form-item label="性别" prop="sex">
          <el-input v-model="FormModel.sex" style="width: 240px" />
        </el-form-item>

        <el-form-item label="电话号码" prop="phone">
          <el-input v-model="FormModel.phone" style="width: 240px" />
        </el-form-item>

        <el-form-item label="邮箱" prop="email">
          <el-input v-model="FormModel.email" style="width: 240px" />
        </el-form-item>

        <el-form-item label="省" prop="state">
          <el-input v-model="FormModel.state" style="width: 240px" />
        </el-form-item>

        <el-form-item label="市" prop="city">
          <el-input v-model="FormModel.city" style="width: 240px" />
        </el-form-item>

        <el-form-item label="区" prop="address">
          <el-input v-model="FormModel.address" style="width: 240px" />
        </el-form-item>

        <el-form-item label="国家" prop="country">
          <el-input v-model="FormModel.country" style="width: 240px" />
        </el-form-item>
        <el-row type="flex">
          <el-col>
            <el-button
              style="margin-left: 110px"
              type="primary"
              @click="confrimAddBtn"
            >确认</el-button
            >
            <el-button style="margin-left: 40px" @click="addClear"
            >取消</el-button
            >
          </el-col>
        </el-row>
      </el-form>
    </el-dialog>

    <!-- 修改对话框 -->
    <el-dialog
      v-model="editOpen"
      :title="'修改分销商'"
      width="500px"
      append-to-body
      @close="editorClear"
    >
      <el-form
        label-width="100px"
        style="margin-left: 30px"
        ref="FormRef"
        :model="FormModel"
        :rules="rules"
      >
        <el-row type="flex">
          <el-col>
            <el-form-item label="用户名" prop="username">
              <el-input v-model="FormModel.username" style="width: 240px" />
            </el-form-item>

            <el-form-item label="名称" prop="nickname">
              <el-input v-model="FormModel.nickname" style="width: 240px" />
            </el-form-item>

            <el-form-item label="电话号码" prop="phone">
              <el-input v-model="FormModel.phone" style="width: 240px" />
            </el-form-item>

            <el-form-item label="邮箱" prop="email">
              <el-input v-model="FormModel.email" style="width: 240px" />
            </el-form-item>

            <el-form-item label="省" prop="state">
              <el-input v-model="FormModel.state" style="width: 240px" />
            </el-form-item>

            <el-form-item label="市" prop="city">
              <el-input v-model="FormModel.city" style="width: 240px" />
            </el-form-item>

            <el-form-item label="区" prop="address">
              <el-input v-model="FormModel.address" style="width: 240px" />
            </el-form-item>
            <el-button style="margin-left: 110px" type="primary" @click="confrimEditBtn"
            >确认</el-button
            >
            <el-button style="margin-left: 40px" @click="editorClear"
            >取消</el-button
            >
          </el-col>
        </el-row>
      </el-form>
    </el-dialog>
    <!-- 绑定客户的弹层 -->
    <el-dialog
      v-model="bindclientOpen"
      :title="'绑定客户'"
      width="800px"
      append-to-body
    >
      <el-checkbox-group v-model="hospitalList.value">
        <el-checkbox
          v-for="item in hospitalList"
          :key="item.hospital_id"
          :value="item.hospital_id"
        >{{ item.custom_user.nickname }}</el-checkbox
        >
        <el-row
          type="flex"
          justify="center"
          style="height: 50px"
          align="middle"
        >
          <el-button type="primary" @click="change">确认</el-button>
          <el-button>取消</el-button>
        </el-row>
      </el-checkbox-group>
    </el-dialog>
  </div>
</template>

<style scoped lang='scss'>
.app-container {
  padding: 10px;
  .distributor {
    display: flex;
    align-items: center;
    justify-content: space-between;
  }
}
</style>
